/**
 * 学习目标：useState 的 三个注意事项 - 书写规范
 * 1. useState 可以多次调用，从而定义多个状态
 * 2. 可以声明任意类型数据(字符串，数组，对象等)
 * 3. 修改时，遵循 setState 规则： 新值覆盖旧指
 *
 * 书写规范
 * [状态名, set状态名大写开头]
 * 建议 输入 useState，利用代码片段自动生成和补全
 */
import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('msg');
  const [list, setList] = useState([1, 2, 3]);
  const [obj, setObj] = useState({ name: 'zs', age: 20 });
  return (
    <>
      我是App - {count}
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我修改 count{' '}
      </button>
      <div>
        <div>msg: - {msg}</div>
        <button onClick={() => setMsg(msg + '~')}>点我修改msg</button>
      </div>
      <div>
        list - {list}
        <button onClick={() => setList([...list, 4])}>点我修改list</button>
      </div>
      <div>obj - {JSON.stringify(obj)}</div>
    </>
  );
}
export default App;
